<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--第一步引入css vue.js index.js -->
    <link rel="stylesheet" href="elementui/index.css">
    <script src="elementui/vue.js"></script>
    <script src="elementui/index.js"></script>
</head>
<body>
<div id="app">
    <!--
        el-table：表格组件
        :data="tableData"：将tableData数据绑定到el-table组件中
        prop="date": 后台返回的数据属性名称 必须 跟表格中prop名称一致

    -->

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>

    <!--分页组件
    @size-change="handleSizeChange"：每日显示条数
   @current-change="handleCurrentChange"：当前第几页
   :current-page="currentPage4"：默认当前显示第几页
   :page-sizes="[10, 20, 30, 40]" ：每页下拉
   :page-size="30"  ：默认显示条数
   total="100"：总条数

    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100">
    </el-pagination>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        data() {
            return {
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 1,
                //后台：List<T>
                //前台：数组[{json对象},{json对象...}]
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        }
    })
</script>
</html>